<template>
  <el-card style="height: 500px;overflow: scroll" v-if="this.certStatus==0">
    <h1 style="color: aquamarine">个人身份认证</h1>
    <el-form label-width="80px" style="width:500px">

      <el-form-item label="姓名">
        <el-input placeholder="请输入姓名" v-model="driver.realName"></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input placeholder="请输入手机号" v-model="driver.phone"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input placeholder="请输入身份证号" v-model="driver.idCard"></el-input>
      </el-form-item>

      <el-form-item v-model="driver.positiveIdCard" label="身份证正面照">
        <el-upload style="float: left"
                   :action="'http://localhost:19480/audit/upload'"
                   name="file"
                   :limit="1"
                   list-type="picture-card"
                   :on-success="handleSuccess1"
                   :on-preview="handlePictureCardPreview1"
                   :on-remove="handleRemove1">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl1" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item v-model="driver.negativeIdCard" label="身份证反面照">
        <el-upload style="float: left"
                   :action="'http://localhost:19480/audit/upload'"
                   name="file"
                   :limit="1"
                   list-type="picture-card"
                   :on-success="handleSuccess2"
                   :on-preview="handlePictureCardPreview2"
                   :on-remove="handleRemove2">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl2" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item v-model="driver.driverIdCard" label="驾驶证">
        <el-upload style="float: left"
                   :action="'http://localhost:19480/audit/upload'"
                   name="file"
                   :limit="1"
                   list-type="picture-card"
                   :on-success="handleSuccess3"
                   :on-preview="handlePictureCardPreview3"
                   :on-remove="handleRemove3">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl3" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="post()">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="height: 500px;overflow: scroll" v-else-if="this.certStatus==1">
    <h1>待审核</h1>
  </el-card>
  <el-card style="height: 500px;overflow: scroll" v-else="certStatus==2">
    <h1>审核通过</h1>
  </el-card>
</template>

<script>
export default {
  name: "AuditView",
  data() {
    return {
      dialogImageUrl1: '',
      dialogImageUrl2: '',
      dialogImageUrl3: '',
      dialogVisible: false,
      driver: {},
      certStatus: localStorage.certStatus?JSON.parse(localStorage.certStatus):null,
    };
  },
  methods: {
    post() {
      let data = this.qs.stringify(this.driver);
      console.log(data)
      this.axios.post("http://localhost:19480/driver/create", data)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("提交成功!");
              // 将待审核状态存入到缓存中
              const data =  1;
              localStorage.setItem("certStatus",JSON.stringify(data));
              //跳回到后台管理页面
              this.$router.push('/index');
            } else {
              this.$message.error(response.data.message)
            }
          })
    },
    handleSuccess1(response, file, fileList) {
      this.driver.positiveIdCard = response.data;
    },
    handleSuccess2(response, file, fileList) {
      this.driver.negativeIdCard = response.data;
    },
    handleSuccess3(response, file, fileList) {
      this.driver.driverIdCard = response.data;
    },
    handleRemove1(file, fileList) {
      this.user.imgUrl = null;
      this.axios.post("http://localhost:19480/audit/remove?url=" + file.response.data)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("删除完成!");
            }
          })
    },
    handleRemove2(file, fileList) {
      this.user.imgUrl = null;
      this.axios.post("http://localhost:19480/audit/remove?url=" + file.response.data)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("删除完成!");
            }
          })
    },
    handleRemove3(file, fileList) {
      this.user.imgUrl = null;
      this.axios.post("http://localhost:19480/audit/remove?url=" + file.response.data)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("删除完成!");
            }
          })
    },
    handlePictureCardPreview1(file) {
      this.dialogImageUrl1 = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl2 = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreview3(file) {
      this.dialogImageUrl3 = file.url;
      this.dialogVisible = true;
    },
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>